<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['add'])

const newTodoText = ref('')

function addTodo() {
  if (newTodoText.value.trim()) {
    emit('add', newTodoText.value.trim())
    newTodoText.value = ''
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodoText" placeholder="Add a new todo" />
    <button class="add-btn"  type="submit">添加</button>
  </form>
</template>

<style>.add-btn {
    margin-left: 10px;
    padding: 8px 15px;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }</style>